import React, { Component } from 'react'
import Top from './top'
import Conter from './Conter'
import Footer from './Footer'

/* 
组件通讯
父子:父组件给子组件绑定自定义属性 属性值是父的数据 子中通过props获取到父的数据
子父:父组件给子组件绑定自定义事件 属性值是父自己的方法 子通过props执行这个方法并传参
单向数据流:数据流只能从外层组件项里层组件传递 不能反向传递
为什么要使用单向数据流:防止父的数据被篡改
使用场景:1.组件关系简单 嵌套不复杂 2.封装的组件
*/
export default class Vote extends Component {

    state={
        title:'一个月内不要下雨了',
        sup:100,
        opp:1
    }

    //修改 人数
    changeProson = (type,n)=>{
        if(type=='SUP'){
            this.setState({sup:this.state.sup+n})
        }else{
            this.setState({opp:this.state.opp+n})
        }
    }


  render() {
    console.log(this);
    
    return (
      <div>
        <Top title={this.state.title} sup={this.state.sup} opp={this.state.opp}></Top>
        <Conter {...this.state}></Conter>
        {/* 子传父 */}
        <Footer changeProson1={this.changeProson}></Footer>
      </div>
    )
  }
}
